import React, { memo, useState } from "react"
import { FilterWrapper } from "./style"
import filterData from "@/assets/data/filter_data.json"
import classNames from "classnames"

const EntireFilter = memo((props) => {
    const [selectItems, setSelectItems] = useState([])

    function itemClickHandle(item) {
        const newItems = [...selectItems]
        if (newItems.includes(item)) {
            const itemIndex = newItems.findIndex((findItem) => (findItem === item))
            newItems.splice(itemIndex, 1)
            // newItems.splice(newItems.lastIndexOf(item), 1)
        } else {
            newItems.push(item)
        }
        setSelectItems(newItems)
    }

    return (
        <FilterWrapper>
            <div className="filter">
                {filterData.map((item) => {
                    return (
                        <div
                            key={item}
                            className={classNames("item", { active: selectItems.includes(item) })}
                            onClick={(e) => itemClickHandle(item)}
                        >
                            {item}
                        </div>
                    )
                })} 
            </div>
        </FilterWrapper>
    )
})
export default EntireFilter
